<template>
  <!-- <view class="me-container"> -->
    <!-- 滚动区域开始 -->
    <z-paging
        :scroll-with-animation="true"
        class="me-container"
    >
        <!-- 骨架屏区域开始 -->
        <uv-skeletons :loading="isShowSkeleton" :skeleton="skeleton"></uv-skeletons>
        <!-- 骨架屏区域结束 -->

        <!-- 头像昵称区域开始 -->
        <view class="header-wrap" :style="{ paddingTop: safeAreaInsets?.top + 'px' }" @click="navTo('/pagesUser/user_set/index')">
            <view class="header-box">
                <view class="left">
                    <!-- 头像区域 -->
                    <view class="avatar-box" v-if="userStore.profile">
                        <image class="avatar" v-if="!userStore.profile.user.avatar_url" src="../../static/images/avatar.png"></image>
            <image class="avatar" mode="aspectFill" v-else :src="global.FILE_DOMAIN + userStore.profile.user.avatar_url"></image>
                    </view>
                    <view class="avatar-box" v-else>
                        <uni-icons type="person-filled" color="#fff" size="50"></uni-icons>
                    </view>

                    <view class="username-box">
                        <!-- 用户名 -->
                        <view class="username" v-if="userStore.profile">
                            <template v-if="userStore.profile.user.username">
                                <uni-icons type="person" size="20"></uni-icons>
                                {{userStore.profile.user.username}}
                            </template>
                        </view>
                        <view class="username" v-else @click="navTo('/pages/password_login/index')">点击登录</view>

                        <!-- 手机号 -->
                        <view class="mobile" v-if="userStore.profile && userStore.profile.user.mobile">
                            <uni-icons type="phone" size="20"></uni-icons>
                            {{userStore.profile.user.mobile}}
                        </view>
                    </view>
                </view>
                <view class="right">
                    <text class="icon iconfont icon-youjiantoucu"></text>
                </view>
            </view>
        </view>
        <!-- 头像昵称区域结束 -->

        <!-- 收藏、关注、足迹区域开始 -->
        <view class="tip-wrap">
            <!-- <view class="tip-item" @click="navTo('/pagesUser/shop_collect/index')">
                <text class="num">{{collectShopNum}}</text>
                <text class="txt">收藏的店铺</text>
            </view>
            <view class="tip-item" @click="navTo('/pagesUser/goods_collect/index')">
                <text class="num">{{ collectGoodsNum }}</text>
                <text class="txt">收藏的商品</text>
            </view>
            <view class="tip-item" @click="navTo('/pagesUser/goods_follow/index')">
                <text class="num">{{followGoodsNum}}</text>
                <text class="txt">关注的商品</text>
            </view>
            <view class="tip-item" @click="navTo('/pagesUser/footprint/index')">
                <text class="num">{{footprintNum}}</text>
                <text class="txt">我的足迹</text>
            </view>

            <view class="tip-item" @click="navTo('/pagesUser/goods_evaluate/index')">
                <text class="num">{{evaluateNum}}</text>
                <text class="txt">我的评价</text>
            </view> -->
        </view>
        <!-- 收藏、关注、足迹区域结束 -->

        <!-- 订单区域开始 -->
        <view class="order-wrap">
            <!-- 我的订单 -->
            <view class="order">
                <!-- 面板的标题 -->
                <view class="order-title">
                    <text class="title">我的订单</text>
                    <view class="all-box" @click="navTo('/pagesOrder/order_list/index?status=0')">
                        <text class="all">全部订单</text>
                        <text class="icon iconfont icon-youjiantoucu"></text>
                    </view>
                </view>
                <!-- 面板的主体 -->
                <view class="order-body">
                    <!-- 待付款 -->
                    <uni-badge :text="waitPayNum" size="normal" :absolute="badgeAbsolute" :offset="badgeOffest">
                        <view class="order-item" @click="navTo('/pagesOrder/order_list/index?status=1')">
                            <text class="icon iconfont icon-daifukuan"></text>
                            <text class="txt">待付款</text>
                        </view>
                    </uni-badge>

                    <!-- 待发货 -->
                    <uni-badge :text="waitShipmentNum" size="normal" :absolute="badgeAbsolute" :offset="badgeOffest">
                        <view class="order-item" @click="navTo('/pagesOrder/order_list/index?status=2')">
                            <text class="icon iconfont icon-daifahuo"></text>
                            <text class="txt">待发货</text>
                        </view>
                    </uni-badge>

                    <!-- 待收货 -->
                    <uni-badge :text="waitReceivingNum" size="normal" :absolute="badgeAbsolute" :offset="badgeOffest">
                        <view class="order-item" @click="navTo('/pagesOrder/order_list/index?status=3')">
                            <text class="icon iconfont icon-daishouhuo"></text>
                            <text class="txt">待收货</text>
                        </view>
                    </uni-badge>

                    <!-- 待评价 -->
                    <uni-badge :text="waitEvaluateNum" size="normal" :absolute="badgeAbsolute" :offset="badgeOffest">
                        <view class="order-item" @click="navTo('/pagesOrder/order_list/index?status=4')">
                            <text class="icon iconfont icon-daipingjia1"></text>
                            <text class="txt">待评价</text>
                        </view>
                    </uni-badge>

                    <!-- 退款 -->
                    <uni-badge :text="refundNum" size="normal" :absolute="badgeAbsolute" :offset="badgeOffest">
                        <view class="order-item" @click="navTo('/pagesOrder/refund_order_list/index?status=5')">
                            <text class="icon iconfont icon-tuikuan"></text>
                            <text class="txt">退款/退货</text>
                        </view>
                    </uni-badge>
                </view>
            </view>
        </view>
        <!-- 订单区域结束 -->

        <!-- 控制面板区域开始 -->
        <view class="panel-wrap">
            <view class="panel-item" v-for="(item, index) in menus" :key="index" @click="navTo(item.url)">
                <view class="left">
                    <text class="icon iconfont" :class="item.icon"></text>
                    <text class="title">{{ item.title }}</text>
                </view>
                <view class="right">
                    <text class="icon iconfont icon-youjiantoucu"></text>
                </view>
            </view> 
        </view>
        <!-- 控制面板区域结束 -->
    </z-paging>
<!-- </view> -->
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores'
import { ref, inject, reactive } from "vue";
import { onShow } from "@dcloudio/uni-app"
import { reqOrderTotalAPI } from "@/apis/order"
import { reqUserFootprintTotalAPI } from "@/apis/footprint"



// --------------- 定义全局变量开始 ---------------
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

// 全局属性
const global:any = inject('global')

// 用户存储
const userStore = useUserStore()
// --------------- 定义全局变量结束 ---------------



// --------------- 定义骨架变量开始 ---------------
// 定义是否显示骨架
const isShowSkeleton = ref(false)

// 定义骨架参数
const skeleton = reactive([
    {
        type: 'custom',
        num: 1,
        style: 'height:400rpx;',
    },
    40,
    {
        type: 'flex',
        num: 1,
        style: 'justify-content: space-evenly;border-radius: 10rpx;background-color: #fff;margin: 0 10rpx;padding: 20rpx 0',
        children: [
            {
                type: 'custom',
                num: 2,
                style: ['width: 80rpx;height:40rpx;margin-left:30rpx;','width: 140rpx;height:40rpx;']
            },
            {
                type: 'custom',
                num: 2,
                style: ['width: 80rpx;height:40rpx;margin-left:30rpx;','width: 140rpx;height:40rpx;']
            },
            {
                type: 'custom',
                num: 2,
                style: ['width: 80rpx;height:40rpx;margin-left:30rpx;','width: 140rpx;height:40rpx;']
            },
            {
                type: 'custom',
                num: 2,
                style: ['width: 80rpx;height:40rpx;margin-left:30rpx;','width: 140rpx;height:40rpx;']
            },
        ]
    },
    20,
    {
        type: 'flex',
        num: 1,
        style: 'justify-content: space-between;align-items: center;background-color: #fff;margin: 0 10rpx;padding: 20rpx 0;border-radius: 10rpx;',
        children: [
            {
                type: 'custom',
                num: 1,
                style: ['width: 140rpx;height:40rpx;margin-left:30rpx;','width: 140rpx;height:40rpx;']
            },
            {
                type: 'custom',
                num: 1,
                style: ['width: 100rpx;height:30rpx;margin-right:30rpx;','width: 140rpx;height:40rpx;']
            }
        ]
    },
    {
        type: 'custom',
        num: 1,
        style: 'height:2rpx;',
    },
    {
        type: 'flex',
        num: 1,
        style: 'justify-content: space-evenly;background-color: #fff;margin: 0 10rpx;padding: 20rpx 0',
        children: [
            {
                type: 'custom',
                num: 2,
                style: ['width: 100rpx;height:100rpx;margin-left:20rpx;','width: 140rpx;height:30rpx;']
            },
            {
                type: 'custom',
                num: 2,
                style: ['width: 100rpx;height:100rpx;margin-left:20rpx;','width: 140rpx;height:30rpx;']
            },
            {
                type: 'custom',
                num: 2,
                style: ['width: 100rpx;height:100rpx;margin-left:20rpx;','width: 140rpx;height:30rpx;']
            },
            {
                type: 'custom',
                num: 2,
                style: ['width: 100rpx;height:100rpx;margin-left:20rpx;','width: 140rpx;height:30rpx;']
            },
        ]
    },
    20,
    {
        type: 'flex',
        num: 1,
        style: 'justify-content: space-between;border-radius: 10rpx;background-color: #fff;margin: 0 10rpx;padding: 30rpx 20rpx',
        children: [
            {
                type: 'custom',
                num: 1,
                style: 'width: 180rpx;height:40rpx;'
            },
            {
                type: 'custom',
                num: 1,
                style: 'width: 40rpx;height:40rpx;'
            },
        ]
    },
    {
        type: 'custom',
        num: 1,
        style: 'height:2rpx;',
    },
    {
        type: 'flex',
        num: 1,
        style: 'justify-content: space-between;border-radius: 10rpx;background-color: #fff;margin: 0 10rpx;padding: 30rpx 20rpx',
        children: [
            {
                type: 'custom',
                num: 1,
                style: 'width: 180rpx;height:40rpx;'
            },
            {
                type: 'custom',
                num: 1,
                style: 'width: 40rpx;height:40rpx;'
            },
        ]
    },
    {
        type: 'custom',
        num: 1,
        style: 'height:2rpx;',
    },
    {
        type: 'flex',
        num: 1,
        style: 'justify-content: space-between;border-radius: 10rpx;background-color: #fff;margin: 0 10rpx;padding: 30rpx 20rpx',
        children: [
            {
                type: 'custom',
                num: 1,
                style: 'width: 180rpx;height:40rpx;'
            },
            {
                type: 'custom',
                num: 1,
                style: 'width: 40rpx;height:40rpx;'
            },
        ]
    },
    {
        type: 'custom',
        num: 1,
        style: 'height:2rpx;',
    },
    {
        type: 'flex',
        num: 1,
        style: 'justify-content: space-between;border-radius: 10rpx;background-color: #fff;margin: 0 10rpx;padding: 30rpx 20rpx',
        children: [
            {
                type: 'custom',
                num: 1,
                style: 'width: 180rpx;height:40rpx;'
            },
            {
                type: 'custom',
                num: 1,
                style: 'width: 40rpx;height:40rpx;'
            },
        ]
    },
    {
        type: 'custom',
        num: 1,
        style: 'height:2rpx;',
    }
])
// --------------- 定义骨架变量结束 ---------------



// ------------ 获取收藏店铺/商品/关注的商品数量/足迹数量功能开始 ------------
// 收藏的店铺数量
const collectShopNum = ref(0)

// 收藏的商品数量
const collectGoodsNum = ref(0)

// 关注的商品数量
const followGoodsNum = ref(0)

// 足迹数量
const footprintNum = ref(0)

// 评价数量
const evaluateNum = ref(0)

// 获取足迹数量
const getUserFootprintTotal = async () => {
	const result:any = await reqUserFootprintTotalAPI()
	footprintNum.value = result.data.total
}

// 获取评价数量
const getUserEvaluateTotal = async () => {
	// const result:any = await reqGoodsEvaluateTotalAPI({uid: userStore.profile.user.uid, status: 1})
	// evaluateNum.value = result.data.total
}
// ------------ 获取收藏店铺/商品/关注的商品数量/足迹数量功能结束 -------------



// --------------------- 获取各种状态的订单数量功能开始 ---------------------
// 待付款订单数量
const waitPayNum:any = ref(0)

// 待发货订单数量
const waitShipmentNum:any = ref(0)

// 待收货订单数量
const waitReceivingNum:any = ref(0)

// 待评价订单数量
const waitEvaluateNum:any = ref(0)

// 退款订单数量
const refundNum:any = ref(0)

// 偏移量
const badgeOffest:any = ref([4, 1])

// 绝对位置
const badgeAbsolute:any = ref('rightTop')

const getOrderTotal = async (status:any) => {
	const result:any = await reqOrderTotalAPI({status, is_delete: '0'})
	if (status == 1) { // 待付款订单数量
		waitPayNum.value = result.data.total
	} else if (status == 2) { // 待发货订单数量
		waitShipmentNum.value = result.data.total
	} else if (status == 3) { // 待收货订单数量
		waitReceivingNum.value = result.data.total
	} else if (status == 4) { // 待评价订单数量
		waitEvaluateNum.value = result.data.total
	} else if (status == 5) { // 退款订单数量
		refundNum.value = result.data.total
	}
}

onShow(async () => {
    // 显示骨架
    isShowSkeleton.value = true

	// 刷新TOKEN
	await userStore.refreshToken('/pages/me/index')

	if (userStore.profile) {
		await Promise.all([
			getOrderTotal(1),
			getOrderTotal(2),
			getOrderTotal(3),
			getOrderTotal(4),
			getOrderTotal(5),
            getUserFootprintTotal(),
            getUserEvaluateTotal()
		])
	} else {
		uni.redirectTo({ url: '/pages/password_login/index' })
	}

    // 隐藏骨架
    isShowSkeleton.value = false
})
// --------------------- 获取各种状态的订单数量功能结束 ---------------------


// 菜单栏
const menus =  ref(
	[
		{
			title: '收货地址',
			url: '/pagesUser/delivery_address/index',
            icon: 'icon-dizhi'
		},
		{
			title: '个人设置',
			url: '/pagesUser/user_set/index',
            icon: 'icon-shezhi'
		},
		{
			title: '意见反馈',
			url: '/pagesUser/feedback/index',
            icon: 'icon-yijianfankui'
		}
	]
)

// 页面跳转
const navTo = (url:any) => {
	if (userStore.profile) {
		uni.navigateTo({url})
	} else {
		uni.navigateTo({url: '/pages/password_login/index'})
	}
}

</script>

<style scoped lang="scss">
.me-container {
  background-color: #FAF5F5;
    
  .header-wrap {
    background: url();
    position: relative;
    .header-box {
      position: absolute;
      bottom: -50rpx;
      left: 50%;
      transform: translate(-50%);
      height: 160rpx;
      background-color: #fff;
      border-top-left-radius: 15rpx;
      border-top-right-radius: 15rpx;
      width: 98%;
      padding: 20rpx;

      display: flex;
      align-items: center;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;

        .avatar-box {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
          border: 2rpx solid #CD0011;
          overflow: hidden;

          display: flex;
          justify-content: center;
          align-items: center;

          .avatar {
            width: 100%;
            height: 100%;
              
          }
        }
        .username-box {
          padding-left: 10rpx;
          .username {
            font-weight: bold;
          }
          .mobile {
            margin-top: 10rpx;
          }
        }
      }
    }
    background-repeat: no-repeat;
    background-size: contain;
    height: 400rpx;
  }

  // 收藏、关注、足迹区域
  .tip-wrap {
    background-color: #fff;
    margin: 80rpx 10rpx 0 10rpx;
    padding: 20rpx 10rpx;

    display: flex;
    justify-content: space-evenly;

    border-radius: 10rpx;

    .tip-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .num {
        color: #CD0011;
        font-weight: bold;
        margin-bottom: 10rpx;
      }
      .txt {
        font-size: 24rpx;
      }
    }
  }

  // 订单区域
  .order-wrap {
    background-color: #fff;
    margin: 20rpx 10rpx 0 10rpx;
    border-radius: 10rpx;
    // 面板
    .order {
      padding: 20rpx;

      // 面板标题
      .order-title {
        display: flex;
        justify-content: space-between;
        height: 80rpx;
        line-height: 80rpx;
        border-bottom: 2rpx solid #ccc;
        .title {
          font-weight: bold;
        }
        .all-box {
          .icon {
            font-size: 24rpx;
          }
          .all {
            font-size: 24rpx;
          }
        }
      }

      // 面板内容
      .order-body {
        display: flex;
        justify-content: space-between;
        margin-top: 20rpx;
        .order-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .icon {
            font-size: 58rpx;
          }
          .txt {
            margin-top: 10rpx;
            font-size: 24rpx;
          }
        }
      }
    }
  }

  // 面板区域
  .panel-wrap {
    background-color: #fff;
    margin: 20rpx 10rpx;
    border-radius: 10rpx;
    padding: 20rpx;

    .panel-item {
      display: flex;
      justify-content: space-between;

      height: 100rpx;
      line-height: 100rpx;
      border-bottom: 2rpx solid #ccc;
      color: gray;

      &:last-child {
        border-bottom: none;
      }

      .left {
        display: flex;
        align-items: center;
        .icon {
          font-size: 40rpx;
        }
        .title {
          margin-left: 10rpx;
          font-size: 26rpx;
        }
      }
    }
  }
}
</style>